<template>
  <div>
    <!-- 对话框(地图) -->
    <el-dialog title="地图"  v-model="visible"
    width="100%"
      class="common-dialog"
      :close-on-click-modal="false" draggable>
      <el-input style="width: 100px" v-show="false" readonly   v-model="currentValue"></el-input>
      <div class="el-dialog-div"  ><MapTools
        :mapColumn="mapColumn"
        :mapColumnType="mapColumnType"
        :mapColumnValue="mapColumnValue"
        :center="center"
        :geomValue="mapGeomInfo"
        @drawEnd="handledrawEnd"
        ref="mapToolsRef"
      ></MapTools> </div>
      
   </el-dialog>
  </div>
</template>
<script setup lang="ts" name="MapLonlatDialog">
import MapTools from "/@/components/MapTools/index.vue";
const visible = ref(false)
const currentValue = ref('')
const center = ref('')
const mapColumnValue = ref('')
const mapColumnType = ref('')
const mapGeomInfo = ref('')
const mapColumn = ref('')
const mapToolsRef = ref();
// 打开弹窗
const openDialog = (param) => {
  visible.value = true 
  mapColumnValue.value=param.mapColumnValue;
  mapColumnType.value=param.mapColumnType;
  mapColumn.value=param.mapColumn;
  mapGeomInfo.value=JSON.stringify({'center':param.mapColumnType=='lonlat'?param.mapColumnValue:'','geom':param.mapColumnType=='geom'?param.mapColumnValue:''})
  console.log('param:'+param)
};
const emit = defineEmits(['getMapLonlatEnd']);
const handledrawEnd = (value: string) => {
      currentValue.value = value;
      
      emit('getMapLonlatEnd',value);//给父组件赋值
      console.log("获取中心点坐标:" + value);
      visible.value=false;
      
    }
// 暴露变量
defineExpose({
  openDialog
});
</script>
<style lang="less" scope>

.common-dialog {
    // display: flex;
    // justify-content: center;
    // align-items: Center;
    overflow: hidden;
    height: 100%;
    .el-dialog {
        margin: 0 auto !important;
        position: relative;
       
        .el-dialog__header{
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            width: 100%;
            height: 60px;
            z-index: 1;
        }
        .el-dialog__body {
            width: 100%;
            overflow: hidden;
            overflow-y: auto;
            max-height: 90vh;//最大高度为视口高度的90%
            padding-top: 80px;
            padding-bottom: 100px;
            z-index: 1;            
        }
        .el-dialog__footer{
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 80px;
            z-index: 1;
        }
    }
}


</style>  